import {Component} from '@angular/core';
import {Store} from "@ngrx/store";
import {Step} from "../store/models/step.model";
import {Utils} from "../common/utils";
import {pairwise} from "rxjs";

@Component({
  selector: 'app-step4',
  templateUrl: './step4.component.html',
  styleUrls: ['./step4.component.less']
})
export class Step4Component {
  data: object[] = [];

  constructor(private store: Store<{ step: any }>) {
    store.select('step').pipe(pairwise()).subscribe(([previousValue, currentValue]) => {
      if(!(previousValue.current === 2 &&
        currentValue.current === 3)) return
      console.log('执行step4')
      const res = currentValue;
      console.log('res',res)
      // data format, It has to be an array, otherwise it will be out of order
      const stepData: Step = res.stepData
      const formatStep2 = (data: any) => {
        const formatFemaleClothes = (femaleData: any[]) => {
          const result = femaleData.reduce((acc: string[], item: { value: any; key: any; label: any; }) => {
            if (item.value) {
              acc.push(`${item.key}${item.label}`);
            }
            return acc;
          }, []);
          return result.join(', ');
        }
        const formatMaleClothes = (maleData: any[]) => {
          return maleData.join(', ')
        }
        let resultData : any = {}
        if(data['femaleClothes']){
          resultData['femaleClothes'] = formatFemaleClothes(data['femaleClothes'])
        }
        if(data['maleClothes']){
          resultData['maleClothes'] = formatMaleClothes(data['maleClothes'])
        }
        return resultData;
      }
      const formatStep3 = (data: any) => {
        console.log('formatStep3',data)
        const formatMoreSelected = (moreSelected: any[]) => {
          let result = '';
          for (const [key, value] of Object.entries(moreSelected)) {
            result += `${key}: ${value} <br/>`;
          }
          return result;
        }
        const formatGangedSelect = (gangedSelect: any) => {
          // debugger
          let result = '';
          result += 'option1: <br/>';
          for (const [key, value] of Object.entries(gangedSelect['option1'])) {
            result += `    ${key}: ${value} <br/>`;
          }
          result += 'option2: <br/>';
          for (const [key, value] of Object.entries(gangedSelect['option2'])) {
            result += `    ${key}: ${value} <br/>`;
          }
          console.log('result',result)
          return result
        }
        let resultData : any = {}
        if(data['moreSelected']){
          resultData['moreSelected'] = formatMoreSelected(data['moreSelected'])
        }
        if(data['gangedSelect']){
          resultData['gangedSelect'] = formatGangedSelect(data['gangedSelect'])
        }
        return resultData;
      }
      this.data = [
        stepData['step1'],
        formatStep2(stepData['step2']),
        formatStep3(stepData['step3'])
      ]
      console.log(this.data)
    })
  }
}
